<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

<link href="http://fonts.googleapis.com/css?family=Arvo"
	rel="stylesheet" type="text/css" />
<link href="http://fonts.googleapis.com/css?family=Bevan"
	rel="stylesheet" type="text/css" />

<link rel="stylesheet" type="text/css" href="../../css/style.css" />


<script type="text/javascript" src="../js/httpRequest.js"></script>


<script type="text/javascript">

//ID&PWD 찾기
/* function search(){
	window.open("../member/search_id_pwd.jsp","ID/PWD찾기",
			"width=500,height=300");
} */

//공백제거
function trimStr(s){
	var str="";
	for(i=0; i<s.length; i++){
		if(!(escape(s.charAt(i))=="%20"))
			str+=s.charAt(i);
	}
	return str;
}

//로그인처리처리#1
function login(f) {
	var id = f.id.value;
	var pwd = f.pwd.value;
	
	//공백제거
	trimStr(id);
	trimStr(pwd);

	//#1.id 또는 pwd가 공백일경우!
	if (id == "") {
		alert("ID를 입력하세요!");
		return;
		}
	
	else if (pwd == "") {
		alert("PWD를 입력하세요!");
		return;
		} 
	
	//#2.id 또는 pwd가 공백이 아니면!	
	sendRequest("../ajax/login_check.jsp", 
			"id=" + id + "&pwd=" + pwd +"&login="+"on", resultLogon, "POST");
	
}

////로그인처리처리#2
function resultLogon() {
	if (xhr.readyState == 4 && xhr.status == 200) {
		var res = eval(xhr.responseText);
		//로그인성공
		if (res[0].result == "success") {
			var log_out = document.getElementById("log_out");
			var log_on = document.getElementById("log_on");
			log_out.style.display='none';
			log_on.style.display='block';
			alert("로그인성공");
		}
		
		//비밀번호 불일치
		else if (res[0].result == "fail") 
			alert("비밀번호가 일치하지 않습니다.");
		
		//아이디 무존재
		else 
			alert("등록되지 않은 정보입니다.");
	}
	
	location.href="../main/main.do";
}



//로그아웃처리#1
function logout(){
	sendRequest("../ajax/login_check.jsp", 
			"id=" + id + "&pwd=" + pwd +"&login="+ "off", resultLogoff, "POST");
}

////로그아웃처리처리#2
function resultLogoff() {
	
	if (xhr.readyState == 4 && xhr.status == 200) {
			var log_out = document.getElementById("log_out");
			var log_on = document.getElementById("log_on");
			log_out.style.display='block';
			log_on.style.display='none';
			login_table.id.value="";
			login_table.pwd.value="";
			alert("logoff로그아웃");
	}
}

function inform(){
	location.href="../main/inform.do";
}




</script>
</head>


<body>


	<div id="header">
		<div id="logo">
			<h1>
				<a href="#" style="color: white;">Fast Safe Fire Evacuation</a>
			</h1>
		</div>

		<div id="search">
			<form action="" method="post">
				<div>
					<input class="text" name="search" size="32" maxlength="64" />
				</div>
			</form>
		</div>

		<div id="menu" >
			<ul>
				<li class="first active"><a href="#">Home</a></li>
				<li><a
					href="../main/community_main.do?menu_no=2&cate_no=5&title_no=0&state=list">Community</a>
				</li>
				
				
				<li><a href="#">About</a></li>
			
			</ul>
		</div>
	</div>


	<div id="title">
		<div id="title_img">
			<div id="login">
				<div id='log_out'>
					<form id=login_table>
						<table border="0" style="padding: 5px">
							<tr>
								<td style="padding-top: 7px">ID</td>
								<td colspan="2"><input type="text" name="id" id="id"></td>
								<td rowspan="2"><input type="button"  style="width: 50px; height: 50px;"     class="pink_button" value="로그인"  onclick="login(this.form)">
								</td>
							</tr>
							<tr>
								<td>PWD</td>
								<td colspan="2"><input type="password" name="pwd" id="pwd"></td>
							</tr>
							
							<tr>
								<td style="padding: 5px"></td>
								<td align="center" colspan="3" style="padding: 5px">
								<a href="../main/community_main.do?state=id_pw&menu_no=3">
								<input type="button" class="pink_button"  value="ID/PWD찾기"></a>
								<a href="../main/community_main.do?state=join&menu_no=3">
								<input type="button" class ="pink_button" value="회원가입"/></a> </td>
							</tr>
							
							
							
							
						</table>
					</form>
				</div>
				
				
				<div id="log_on"  style="display:none;">
					<table>
				<tr>
					<td colspan="2">${alias}님 환영합니다!!
					<c:if test="${grade =='1' }">
					<img src="../img/grade1.JPG" width="25" height="25">
					</c:if>
					<c:if test="${grade =='2' }">
					<img src="../img/grade2.JPG" width="25" height="25">
					</c:if>
					<c:if test="${grade =='3' }">
					<img src="../img/grade3.JPG" width="25" height="25">
					</c:if>
					<td>
				</tr>
				
				<tr>
					<td><input type="button" class ="pink_button" value="로그아웃" onclick="logout()"></td>
					<td>
					<input type="button" class ="pink_button" value="회원정보" onclick="inform()"/>
					</td>
					
				</tr>
			</table>
				</div>
			</div>
		</div>
	</div>
</body>
</html>